<template>
  <div>
    <div class="all-contain">
    <i class='icon iconfont icon-ziyuan1'></i>
      <ul class="data-contain">
        <li>
          {
        </li>
        <li v-for="(item, index) in obj" :key="index" class="show-data">
          {{index + ':' + item}}
        </li>
        <li>
          }
        </li>
      </ul>
      <ul class="data-contain">
        <li v-for="(item, index) in obj" :key="index" class="show-data">
          <span>
            {{index + ':'}}
          </span>
          <span>
            <input-limit @changeItem="changeItem" :data-index='index' :val="item" class-name="search" data-type="sheetName" data-limit=10></input-limit>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import inputLimit from './input'
  export default {
    data () {
      return {
        obj: this.item || {name: '测试',change: '测试'}
      }
    },
    props: ['item'],
    methods: {
      changeItem: function (v, key) {
        this.obj[key] = v
      }
    },
    components: {
      inputLimit
    }
  }
</script>
<style lang="stylus" scoped>
.all-contain
  height 200px
  background #eeeeee
.data-contain
  padding 10px 30px
  float left
  margin-left 10px
  border-right 1px solid #ddd
  height 100%
  .show-data
    padding-left 10px
</style>

